<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>upload模块快速使用</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/admin/style.css}" media="all">
    <script th:src="@{/static/layui/layui.js}"></script>
    <style type="text/css">
        body {
            background-color: rgb(250, 250, 250);
        }

        header {
            text-align: center;
            padding: 30px 0;
            font-family: 新宋体;
            font-size: 50px;
        }

        /*.layui-container {*/
        /*    background-color: whitesmoke;*/
        /*    padding: 20px;*/
        /*}*/
    </style>
</head>
<body>
<script>
    function uploadfile() {
        var filename = document.getElementById("importFile").value;
        // 这时的filename不是 importFile 框中的值
        alert(filename);
    }

    // function getObjectURL(file){
    //     var url=null
    //     if(window.createObjectURL!=undefined){ // basic
    //         url=window.createObjectURL(file)
    //         console.log("url1:"+url)
    //     }else if(window.URL!=undefined){ // mozilla(firefox)
    //         url=window.URL.createObjectURL(file)
    //         console.log("url2:"+url)
    //     }else if(window.webkitURL!=undefined){ // webkit or chrome
    //         url=window.webkitURL.createObjectURL(file)
    //         console.log("url3:"+url)
    //     }
    //     console.log("url:"+url)
    //     return url  ;
    // }
        layui.use('upload', function () {
        let upload = layui.upload;
        let $ = layui.$;
        //执行实例
        let uploadInst = upload.render({
            elem: '#upload' //绑定元素
            , url: '/imgMatch/upload' //上传接口
            ,before:function (obj) {
                obj.preview(function(index, file, result){
                        console.log("url:"+window.URL.createObjectURL(file));
                        console.log(index); //得到文件索引
                        console.log(file); //得到文件对象
                        console.log("result:"+result); //得到文件base64编码，比如图片
                });
            }
            , done: function (res) {
                if (res.code == 1) {
                    layer.msg("上传成功");
                    //获得图片的路径
                    let src = res.data.src;
                    $("#image").attr("src", src);
                    //将图片的地址赋值给 form的隐藏域
                    $("#path").attr("value", res.data.path);
                } else {
                    layer.msg("上传失败");
                }


            }
            , error: function () {
                //请求异常回调
            }
        });
    });


    layui.use('form', function () {
        let form = layui.form;
        let $ = layui.$;

        // let index = layer.load(1);
        //监听表单的提交
        form.on('submit(query)', function (data) {
            let layer = layui.layer;
            $.ajax({
                url: "/imgMatch/query",
                method: "post",
                data: data.field,
                dataType: "JSON",
                success: function (res) {

                    if (res.code == 1) {
                        layer.close(index);    //返回数据关闭loading
                        //图片回显
                        $("#img1").attr("src", res.data.src1);
                        $("#img2").attr("src", res.data.src2);
                        $("#img3").attr("src", res.data.src3);
                        $("#img4").attr("src", res.data.src4);
                        $("#img5").attr("src", res.data.src5);
                        $("#img6").attr("src", res.data.src6);
                        //图片名称回显
                        $("#name1").attr("value", res.data.name1);
                        $("#name2").attr("value", res.data.name2);
                        $("#name3").attr("value", res.data.name3);
                        $("#name4").attr("value", res.data.name4);
                        $("#name5").attr("value", res.data.name5);
                        $("#name6").attr("value", res.data.name6);
                    }else {
                        layer.msg("上传失败");
                    }
                }
            })
            return false;
        });
        form.on('submit(query1)', function (data) {
            $.ajax({
                url: "/imgMatch/query1",
                method: "post",
                data: data.field,
                dataType: "JSON",
                success: function (res) {
                    if (res.code == 1) {
                        //图片回显
                        $("#img1").attr("src", res.data.src1);
                        $("#img2").attr("src", res.data.src2);
                        $("#img3").attr("src", res.data.src3);
                        $("#img4").attr("src", res.data.src4);
                        $("#img5").attr("src", res.data.src5);
                        $("#img6").attr("src", res.data.src6);
                        //图片名称回显
                        $("#name1").attr("value", res.data.name1);
                        $("#name2").attr("value", res.data.name2);
                        $("#name3").attr("value", res.data.name3);
                        $("#name4").attr("value", res.data.name4);
                        $("#name5").attr("value", res.data.name5);
                        $("#name6").attr("value", res.data.name6);
                    }else {
                        layer.msg("上传失败");
                    }
                }
            })
            return false;
        });
    });
    // layui.use('form', function () {
    //     let form = layui.form;
    //     let $ = layui.$;
    //     //监听表单的提交
    //     form.on('submit(query)', function (data) {
    //         $.ajax({
    //             url: "/imgMatch/query",
    //             method: "post",
    //             data: data.field,
    //             dataType: "JSON",
    //             success: function (res) {
    //                 if (res.code == 1) {
    //                     img(res)
    //                 }else {
    //                     layer.msg("上传失败");
    //                 }
    //             }
    //         })
    //         return false;
    //     });
    // });
</script>
<header style="background-image: url(../static/layui/css/modules/layer/default/background.jpeg);">
    <span>基于LayUI完成图片的上传和预览功能</span>
</header>
<hr class="layui-border-blue">
<article>
<!--    <input type="file" id="importFile" />-->
<!--    <input type="button" class="layui-btn" οnclick="uploadfile()"/>-->
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md6">
                <!-- 这里添加一个form表单 -->
                <form class="layui-form" action="">
                    <div class="layui-form-item layui-form-text layui-hide">
                        <label class="layui-form-label">图片类别</label>
                        <div class="layui-input-block">
                            <input id="path" type="text" style="width: 300px" name="path" required  lay-verify="required" placeholder="请输入图片类别" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">上传图片</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="upload">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">图片预览</label>
                        <div class="layui-input-block">
                            <img id="image" style="height: 200px;width: 300px">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="query1">搜索1</button>
                        </div>
                    </div>
                </form>
                <form class="layui-form" action="">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">图片类别</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 300px" name="type" required  lay-verify="required" placeholder="请输入图片类别" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="query">搜索</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-col-md6">
                <div class="layui-row grid-demo grid-demo-bg1">
                    <div class="layui-col-md12">

                        <header style="font-size: 20px;text-align: left;font-weight: bold" >
                            <span>搜索结果:</span>
                        </header>
<!--                        <table>-->
<!--                            <tr>-->
<!--                                <td>图片一：</td>-->
<!--                                <td></td>-->
<!--                                <td>相似度：95%</td>-->
<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td>图片二</td>-->
<!--                                <td></td>-->
<!--                                <td>相似度：95%</td>-->
<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td>图片三</td>-->
<!--                                <td></td>-->
<!--                                <td>相似度：95%</td>-->
<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td>图片四</td>-->
<!--                                <td></td>-->
<!--                                <td>相似度：95%</td>-->
<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td>图片五</td>-->
<!--                                <td></td>-->
<!--                                <td>相似度：95%</td>-->
<!--                            </tr>-->
<!--                            <tr>-->
<!--                                <td>图片六</td>-->
<!--                                <td></td>-->
<!--                                <td>相似度：95%</td>-->
<!--                            </tr>-->
<!--                        </table>-->
                        <form class="layui-form" action="">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">图片一：</label>
                                <div class="layui-input-block">
                                    <input id="name1" type="text" style="width: 300px" name="name1" required lay-verify="required" th:disabled="true" placeholder="" autocomplete="off" disabled class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">图片二：</label>
                                <div class="layui-input-block">
                                    <input id="name2" type="text" style="width: 300px" name="name2" required  lay-verify="required" th:disabled="true" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">图片三：</label>
                                <div class="layui-input-block">
                                    <input id="name3" type="text" style="width: 300px" name="name3" required  lay-verify="required" th:disabled="true" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">图片四：</label>
                                <div class="layui-input-block">
                                    <input id="name4" type="text" style="width: 300px" name="name4" required  lay-verify="required" th:disabled="true" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">图片五：</label>
                                <div class="layui-input-block">
                                    <input id="name5" type="text" style="width: 300px" name="name5" required  lay-verify="required" th:disabled="true" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">图片六：</label>
                                <div class="layui-input-block">
                                    <input id="name6" type="text" style="width: 300px" name="name6" required  lay-verify="required" th:disabled="true" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <hr class="layui-border-blue">
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md2">
               <img id="img1"  style="width: 180px;height: 100px">
            </div>
            <div class="layui-col-md2">
                <img id="img2"  style="width: 180px;height: 100px">
            </div>
            <div class="layui-col-md2">
                <img id="img3"  style="width: 180px;height: 100px">
            </div>
            <div class="layui-col-md2">
                <img id="img4"  style="width: 180px;height: 100px">
            </div>
            <div class="layui-col-md2">
                <img id="img5"  style="width: 180px;height: 100px">
            </div>
            <div class="layui-col-md2">
                <img id="img6"  style="width: 180px;height: 100px">
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md2">
                <p style="text-align: center">图片一</p>
            </div>
            <div class="layui-col-md2">
                <p style="text-align: center">图片二</p>
            </div>
            <div class="layui-col-md2">
                <p style="text-align: center">图片三</p>
            </div>
            <div class="layui-col-md2">
                <p style="text-align: center">图片四</p>
            </div>
            <div class="layui-col-md2">
                <p style="text-align: center">图片五</p>
            </div>
            <div class="layui-col-md2">
                <p style="text-align: center">图片六</p>
            </div>
        </div>
    </div>
</article>
</body>
</html>
